<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="back-btn" @tap="goBack">
				<text class="iconfont icon-back">&#xe697;</text>
			</view>
			<text class="title">我的钱包</text>
		</view>
		
		<!-- 账户余额卡片 -->
		<view class="balance-card">
			<view class="balance-section">
				<text class="balance-label">账户余额（元）</text>
				<text class="balance-value">{{totalBalance}}</text>
				<view class="balance-btns">
					<button class="action-btn withdraw" @tap="openWithdrawPopup">提现</button>
					<button class="action-btn recharge" @tap="showRechargePopup">充值</button>
				</view>
			</view>
			<view class="balance-details">
				<view class="detail-item">
					<text class="detail-label">可提现金额</text>
					<text class="detail-value">¥{{withdrawableBalance}}</text>
				</view>
				<view class="detail-item">
					<text class="detail-label">冻结金额</text>
					<text class="detail-value">¥{{frozenBalance}}</text>
				</view>
			</view>
		</view>
		
		<!-- 收支明细 -->
		<view class="transaction-list">
			<view class="list-header">
				<text class="header-title">收支明细</text>
				<view class="filter-btn" @tap="showFilterPopup">
					<text>筛选</text>
					<text class="iconfont icon-filter">&#xe6a3;</text>
				</view>
			</view>
			<scroll-view class="list-content" scroll-y @scrolltolower="loadMoreTransactions">
				<view class="transaction-item" v-for="(item, index) in transactionList" :key="index">
					<view class="transaction-info">
						<text class="transaction-type">{{item.type}}</text>
						<text class="transaction-time">{{item.time}}</text>
					</view>
					<view class="transaction-amount" :class="{'income': item.amount > 0}">
						{{item.amount > 0 ? '+' : ''}}{{item.amount}}
					</view>
				</view>
				<view class="no-more" v-if="noMore">没有更多记录了</view>
			</scroll-view>
		</view>
		
		<!-- 提现弹窗 -->
		<view class="popup" v-if="showWithdrawPopup">
			<view class="popup-mask" @tap="closeWithdrawPopup"></view>
			<view class="popup-content withdraw-popup">
				<view class="popup-header">
					<text class="popup-title">提现</text>
					<view class="close-btn" @tap="closeWithdrawPopup">×</view>
				</view>
				<view class="popup-body">
					<view class="withdraw-info">
						<text class="label">可提现金额</text>
						<text class="amount">¥{{withdrawableBalance}}</text>
					</view>
					
					<!-- 金额输入区域 -->
					<view class="amount-input-section">
						<view class="input-area">
							<text class="currency">¥</text>
							<input 
								type="digit" 
								v-model="withdrawAmount" 
								class="amount-input"
								:placeholder="'请输入提现金额'"
								@input="onWithdrawAmountInput"
								:focus="inputFocus"
							/>
						</view>
						<view class="quick-amounts">
							<text class="quick-amount" @tap="setAmount(100)">100元</text>
							<text class="quick-amount" @tap="setAmount(500)">500元</text>
							<text class="quick-amount" @tap="setAmount(1000)">1000元</text>
							<text class="quick-amount withdraw-all" @tap="withdrawAll">全部提现</text>
						</view>
					</view>
					
					<!-- 银行卡选择区域 -->
					<view class="bank-section">
						<view class="section-title">提现到</view>
						<view class="bank-list">
							<view 
								class="bank-card-item" 
								v-for="(card, index) in bankCards" 
								:key="card.id"
								:class="{'active': selectedBankCard && selectedBankCard.id === card.id}"
								@tap="selectBankCard(card)">
								<view class="bank-info">
									<image :src="card.icon" mode="aspectFit" class="bank-icon"></image>
									<view class="bank-detail">
										<text class="bank-name">{{card.bankName}}</text>
										<text class="card-number">{{card.cardNumber}}</text>
									</view>
								</view>
								<view class="check-icon" v-if="selectedBankCard && selectedBankCard.id === card.id">
									<text class="iconfont icon-check">✓</text>
								</view>
							</view>
							<view class="add-bank-card" @tap="addBankCard">
								<text class="iconfont icon-plus">+</text>
								<text>添加银行卡</text>
							</view>
						</view>
					</view>
					
					<!-- 提示信息 -->
					<view class="tips">
						<text class="tip-item">· 提现金额最低1元</text>
						<text class="tip-item">· 提现将在1-3个工作日内到账</text>
						<text class="tip-item">· 如遇问题请联系客服</text>
					</view>
					
					<!-- 确认按钮 -->
					<button 
						class="confirm-btn" 
						:class="{'disabled': !canWithdraw}"
						:disabled="!canWithdraw"
						@tap="confirmWithdraw">
						确认提现
					</button>
				</view>
			</view>
		</view>
		
		<!-- 充值弹窗 -->
		<view class="popup" v-if="showRecharge">
			<view class="popup-mask" @tap="closeRechargePopup"></view>
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">充值</text>
					<view class="close-btn" @tap="closeRechargePopup">×</view>
				</view>
				<view class="popup-body">
					<view class="input-group">
						<text class="currency">¥</text>
						<input type="digit" v-model="rechargeAmount" placeholder="请输入充值金额" />
					</view>
					<view class="recharge-methods">
						<view class="method-item" v-for="(method, index) in rechargeMethods" :key="index" 
							:class="{'active': selectedMethod === method.id}"
							@tap="selectMethod(method.id)">
							<image :src="method.icon" mode="aspectFit"></image>
							<text>{{method.name}}</text>
						</view>
					</view>
					<button class="confirm-btn" @tap="confirmRecharge">确认充值</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 账户余额相关
				totalBalance: '0.00',
				withdrawableBalance: '0.00',
				frozenBalance: '0.00',
				
				// 交易记录相关
				transactionList: [],
				page: 1,
				noMore: false,
				
				// 提现相关
				showWithdrawPopup: false,
				withdrawAmount: '',
				withdrawableAmount: '1000.00',
				selectedBankCard: null,
				bankCards: [
					{
						id: 1,
						bankName: '中国银行',
						cardNumber: '6222 **** **** 1234',
						icon: '/static/images/bank-icons/boc.png'
					},
					{
						id: 2,
						bankName: '建设银行',
						cardNumber: '6227 **** **** 5678',
						icon: '/static/images/bank-icons/ccb.png'
					}
				],
				
				// 充值相关
				showRecharge: false,
				rechargeAmount: '',
				rechargeMethods: [
					{ id: 'alipay', name: '支付宝', icon: '/static/images/alipay.png' },
					{ id: 'wechat', name: '微信支付', icon: '/static/images/wechat.png' },
					{ id: 'bank', name: '银行卡', icon: '/static/images/bank.png' }
				],
				selectedMethod: 'alipay',
				inputFocus: false,
			}
		},
		computed: {
			// 判断是否可以提现
			canWithdraw() {
				const amount = parseFloat(this.withdrawAmount)
				return amount > 0 && 
					amount <= parseFloat(this.withdrawableAmount) && 
					amount >= 1 && 
					this.selectedBankCard
			}
		},
		onLoad() {
			this.loadBalance()
			this.loadTransactions()
		},
		methods: {
			//获取用户余额信息
			loadBalance() {
				// TODO: 调用后端API获取用户余额信息
				uni.getStorage({
					key: 'userInfo',
					success: (res) => {
						//余额
						this.totalBalance = res.data.balance
						this.withdrawableBalance = res.data.withdrawableBalance
						this.frozenBalance = res.data.frozenBalance
					}
				})
        // TODO: 调用获取余额API
        this.totalBalance = '1234.56'
        this.withdrawableBalance = '1000.00'
        this.frozenBalance = '234.56'
			},
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			// 加载交易记录
			loadTransactions() {
				// 模拟数据，实际应该调用API
				const mockTransactions = Array(10).fill().map((_, index) => ({
					type: ['订单收入', '提现', '充值', '退款'][Math.floor(Math.random() * 4)],
					time: '2024-03-20 14:30',
					amount: (Math.random() * 1000 - 500).toFixed(2)
				}))
				this.transactionList = mockTransactions
			},
			
			// 加载更多交易记录
			loadMoreTransactions() {
				if (this.noMore) return
				// 模拟加载更多
				setTimeout(() => {
					const moreTransactions = Array(5).fill().map((_, index) => ({
						type: ['订单收入', '提现', '充值', '退款'][Math.floor(Math.random() * 4)],
						time: '2024-03-20 14:30',
						amount: (Math.random() * 1000 - 500).toFixed(2)
					}))
					this.transactionList = [...this.transactionList, ...moreTransactions]
					if (this.page >= 3) {
						this.noMore = true
					}
					this.page++
				}, 1000)
			},
			
			// 设置快速金额
			setAmount(amount) {
				if (amount <= parseFloat(this.withdrawableBalance)) {
					this.withdrawAmount = amount.toString()
				} else {
					uni.showToast({
						title: '超出可提现金额',
						icon: 'none'
					})
				}
			},
			
			// 选择银行卡
			selectBankCard(card) {
				this.selectedBankCard = card
			},
			
			// 添加银行卡
			addBankCard() {
				uni.navigateTo({
					url: '/pages/addBankCard/addBankCard'
				})
			},
			
			// 打开提现弹窗
			openWithdrawPopup() {
				this.showWithdrawPopup = true
				this.withdrawAmount = ''
				this.inputFocus = true
				// 默认选择第一张银行卡
				if (this.bankCards.length > 0 && !this.selectedBankCard) {
					this.selectedBankCard = this.bankCards[0]
				}
			},
			
			// 关闭提现弹窗
			closeWithdrawPopup() {
				this.showWithdrawPopup = false
				this.withdrawAmount = ''
				this.inputFocus = false
			},
			
			// 输入提现金额
			onWithdrawAmountInput(e) {
				let value = e.detail.value
				// 限制只能输入数字和小数点
				value = value.replace(/[^\d.]/g, '')
				// 限制只能有一个小数点
				const dotIndex = value.indexOf('.')
				if (dotIndex !== -1) {
					value = value.slice(0, dotIndex + 1) + value.slice(dotIndex + 1).replace(/\./g, '')
				}
				// 限制小数点后两位
				if (dotIndex !== -1 && value.length > dotIndex + 3) {
					value = value.slice(0, dotIndex + 3)
				}
				this.withdrawAmount = value
			},
			
			// 全部提现
			withdrawAll() {
				this.withdrawAmount = this.withdrawableAmount
			},
			
			// 显示充值弹窗
			showRechargePopup() {
				this.showRecharge = true
			},
			
			// 关闭充值弹窗
			closeRechargePopup() {
				this.showRecharge = false
				this.rechargeAmount = ''
			},
			
			// 选择充值方式
			selectMethod(methodId) {
				this.selectedMethod = methodId
			},
			
			// 确认充值
			confirmRecharge() {
				if (!this.rechargeAmount) {
					uni.showToast({
						title: '请输入充值金额',
						icon: 'none'
					})
					return
				}
				// TODO: 调用充值API
				this.closeRechargePopup()
				uni.showToast({
					title: '充值成功'
				})
			},
			
			// 显示筛选弹窗
			showFilterPopup() {
				// TODO: 实现筛选功能
				uni.showToast({
					title: '筛选功能开发中',
					icon: 'none'
				})
			}
			
		}
	}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.nav-bar {
	height: 88rpx;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	position: relative;
}

.back-btn {
	position: absolute;
	left: 30rpx;
}

.title {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.balance-card {
	background-color: #1B6EF3;
	padding: 40rpx 30rpx;
	color: #fff;
}

.balance-section {
	text-align: center;
	margin-bottom: 40rpx;
}

.balance-label {
	font-size: 28rpx;
	opacity: 0.8;
}

.balance-value {
	font-size: 60rpx;
	font-weight: bold;
	margin: 20rpx 0;
	display: block;
}

.balance-btns {
	display: flex;
	justify-content: center;
	gap: 30rpx;
	margin-top: 30rpx;
}

.action-btn {
	width: 200rpx;
	height: 80rpx;
	line-height: 80rpx;
	border-radius: 40rpx;
	font-size: 28rpx;
	margin: 0;
	
	&.withdraw {
		background-color: #fff;
		color: #1B6EF3;
	}
	
	&.recharge {
		background-color: rgba(255, 255, 255, 0.2);
		color: #fff;
	}
}

.balance-details {
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 12rpx;
	padding: 30rpx;
	display: flex;
	justify-content: space-around;
}

.detail-item {
	text-align: center;
}

.detail-label {
	font-size: 24rpx;
	opacity: 0.8;
	margin-bottom: 10rpx;
	display: block;
}

.detail-value {
	font-size: 32rpx;
	font-weight: bold;
}

.transaction-list {
	background-color: #fff;
	margin-top: 20rpx;
	padding: 30rpx;
}

.list-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.header-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.filter-btn {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #666;
	
	.iconfont {
		margin-left: 10rpx;
	}
}

.list-content {
	height: calc(100vh - 600rpx);
}

.transaction-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.transaction-info {
	flex: 1;
}

.transaction-type {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
}

.transaction-time {
	font-size: 24rpx;
	color: #999;
}

.transaction-amount {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	
	&.income {
		color: #FF3B30;
	}
}

.no-more {
	text-align: center;
	color: #999;
	font-size: 24rpx;
	padding: 30rpx 0;
}

/* 弹窗样式 */
.popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
}

.popup-mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
}

.popup-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 30rpx;
}

.popup-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;
}

.popup-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.close-btn {
	font-size: 40rpx;
	color: #999;
	padding: 10rpx;
	line-height: 1;
}

.popup-body {
	padding: 20rpx 0;
}

.input-group {
	display: flex;
	align-items: center;
	background-color: #f5f5f5;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.currency {
	font-size: 36rpx;
	color: #333;
	margin-right: 20rpx;
}

input {
	flex: 1;
	font-size: 32rpx;
}

.balance-tips {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 30rpx;
}

.bank-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #f5f5f5;
	padding: 30rpx;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
}

.bank-name {
	font-size: 28rpx;
	color: #333;
}

.recharge-methods {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30rpx;
}

.method-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20rpx;
	border-radius: 12rpx;
	border: 2rpx solid #f0f0f0;
	
	&.active {
		border-color: #1B6EF3;
		background-color: rgba(27, 110, 243, 0.05);
	}
	
	image {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
	}
	
	text {
		font-size: 24rpx;
		color: #333;
	}
}

.confirm-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	background-color: #1B6EF3;
	color: #fff;
	font-size: 32rpx;
	border-radius: 44rpx;
	margin: 0;
}
/* 底部导航栏样式 */
.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-around;
	align-items: center;
	box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nav-item image {
	width: 48rpx;
	height: 48rpx;
	margin-bottom: 6rpx;
}

.nav-item text {
	font-size: 22rpx;
	color: #666;
}

.nav-item.active text {
	color: #1B6EF3;
}

.withdraw-popup {
	.popup-body {
		padding: 30rpx;
		max-height: 80vh;
		overflow-y: auto;
	}
	
	.withdraw-info {
		text-align: center;
		margin-bottom: 40rpx;
		
		.label {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 10rpx;
			display: block;
		}
		
		.amount {
			font-size: 48rpx;
			color: #333;
			font-weight: bold;
		}
	}
	
	.amount-input-section {
		margin-bottom: 40rpx;
		
		.input-area {
			position: relative;
			display: flex;
			align-items: center;
			background-color: #f5f5f5;
			border-radius: 12rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;
			
			.currency {
				font-size: 36rpx;
				color: #333;
				margin-right: 10rpx;
			}
			
			.amount-input {
				flex: 1;
				font-size: 36rpx;
				color: #333;
				height: 60rpx;
			}
		}
		
		.quick-amounts {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			gap: 20rpx;
			
			.quick-amount {
				flex: 1;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: #f5f5f5;
				border-radius: 30rpx;
				font-size: 28rpx;
				color: #333;
				
				&.withdraw-all {
					background-color: rgba(27, 110, 243, 0.1);
					color: #1B6EF3;
				}
			}
		}
	}
	
	.bank-section {
		margin-bottom: 40rpx;
		
		.section-title {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;
		}
		
		.bank-list {
			.bank-card-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				background-color: #f5f5f5;
				border-radius: 12rpx;
				margin-bottom: 20rpx;
				
				&.active {
					background-color: rgba(27, 110, 243, 0.1);
					border: 2rpx solid #1B6EF3;
				}
				
				.bank-info {
					display: flex;
					align-items: center;
					
					.bank-icon {
						width: 48rpx;
						height: 48rpx;
						margin-right: 20rpx;
					}
					
					.bank-detail {
						.bank-name {
							font-size: 28rpx;
							color: #333;
							margin-bottom: 6rpx;
							display: block;
						}
						
						.card-number {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
				
				.check-icon {
					width: 40rpx;
					height: 40rpx;
					background-color: #1B6EF3;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					
					.iconfont {
						color: #fff;
						font-size: 24rpx;
					}
				}
			}
			
			.add-bank-card {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100rpx;
				background-color: #f5f5f5;
				border-radius: 12rpx;
				border: 2rpx dashed #ccc;
				
				.iconfont {
					font-size: 32rpx;
					color: #999;
					margin-right: 10rpx;
				}
				
				text {
					font-size: 28rpx;
					color: #999;
				}
			}
		}
	}
	
	.tips {
		margin-bottom: 40rpx;
		
		.tip-item {
			font-size: 24rpx;
			color: #999;
			display: block;
			margin-bottom: 10rpx;
		}
	}
	
	.confirm-btn {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		background-color: #1B6EF3;
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
		margin: 0;
		
		&.disabled {
			background-color: #ccc;
		}
	}
}
</style>
